<template>
    <div class="content">
        <el-tabs type="border-card">
            <el-tab-pane label="权限配置">
                <div class="top">
                    <ul>
                        <li>
                            <TextIpt ref="ownerName">
                                <p>姓名</p>
                            </TextIpt>
                        </li>
                        <li>
                            <TextIpt ref="phone">
                                <p>手机号</p>
                            </TextIpt>
                        </li>
                        <li>
                            <TextIpt ref="ICNum">
                                <p>IC卡号</p>
                            </TextIpt>
                        </li>
                    </ul>
                    <div class="btn">
                        <GreenBtn @click.native="query">查询</GreenBtn>
                        <BlueBtn>权限下发</BlueBtn>
                        <BlueBtn>开门方式配置</BlueBtn>
                    </div>
                </div>
                <div class="table">
                    <el-table :data="filterPermissions.slice(pages, pages + 10)" border style="width: 100%">
                        <el-table-column type="index" width="80">
                        </el-table-column>
                        <el-table-column prop="Owner" label="姓名" width="150">
                        </el-table-column>
                        <el-table-column prop="Phone" label="手机号">
                        </el-table-column>
                        <el-table-column prop="ICNum" label="IC卡号">
                        </el-table-column>
                        <el-table-column prop="Permissions" label="权限">
                        </el-table-column>
                        <el-table-column label="照片">
                            <template slot-scope="scope">
                                <p @click="lookImg(scope.row)">查看图片</p>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="setPermissions(scope.row, scope.$index)">配置权限</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="page">
                        <div class="total-page">
                            <p>共<span>{{ Math.ceil(filterPermissions.length / 10) }}</span>页/<span>{{
                                filterPermissions.length
                                    }}</span>条数据
                            </p>
                        </div>
                        <el-pagination background layout="prev, pager, next,jumper" @current-change="getPage"
                            :page-size=10 :current-page.sync=page :total="filterPermissions.length" hide-on-single-page>
                        </el-pagination>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="下发记录">
                <div class="top">
                    <ul>
                        <li>
                            <TextIpt>
                                <p>操作人</p>
                            </TextIpt>
                        </li>
                    </ul>
                    <BlueBtn>查询</BlueBtn>
                </div>
                <div class="table">
                    <template>
                        <el-table :data="tableData" border style="width: 100%">
                            <el-table-column prop="date" label="日期" width="180">
                            </el-table-column>
                            <el-table-column prop="name" label="姓名" width="180">
                            </el-table-column>
                            <el-table-column prop="address" label="地址">
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
            </el-tab-pane>
        </el-tabs>
        <!-- 穿梭框 -->
        <el-dialog title="权限配置" :visible.sync="transferDialog" width="45%" :before-close="transferClose">
            <el-transfer filterable :filter-method="filterMethod" filter-placeholder="请输入" v-model="transferValue"
                :data="transferData" :titles="['全部设备', '已选设备']">
            </el-transfer>
            <span slot="footer" class="dialog-footer">
                <el-button @click="transferClose">取 消</el-button>
                <el-button type="primary" @click="editTransfer">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 点击查看图片弹框 -->
        <el-dialog title="查看图片" :visible.sync="dialogImg" width="30%">
            <div class="dialogImg">
                <img :src="visitorIMg" alt="">
            </div>
        </el-dialog>
    </div>
</template>

<script>
import TextIpt from '@/components/TextIpt.vue';
import GreenBtn from '@/components/GreenBtn.vue';
import BlueBtn from '@/components/BlueBtn.vue';
export default {
    components: {
        BlueBtn,
        GreenBtn,
        TextIpt
    },
    data() {
        return {
            dialogImg: false,
            visitorIMg: '',
            //点击配置权限是当前行的下标
            permissionsIndex: 0,
            transferData: [
                {
                    label: '东大门',
                    key: '东大门',
                },
                {
                    label: '西大门',
                    key: '西大门',
                },
                {
                    label: '南大门',
                    key: '南大门',
                },
                {
                    label: '楼栋A单元1',
                    key: '楼栋A单元1',
                },
                {
                    label: '楼栋A单元2',
                    key: '楼栋A单元2',
                },
                {
                    label: '楼栋A单元3',
                    key: '楼栋A单元3',
                },
                {
                    label: '楼栋B单元1',
                    key: '楼栋B单元1',
                },
                {
                    label: '楼栋B单元2',
                    key: '楼栋B单元2',
                },
                {
                    label: '楼栋B单元3',
                    key: '楼栋B单元3',
                },
                {
                    label: '楼栋C单元1',
                    key: '楼栋C单元1',
                },
                {
                    label: '楼栋C单元2',
                    key: '楼栋C单元2',
                },
                {
                    label: '楼栋C单元3',
                    key: '楼栋C单元3',
                },
                {
                    label: '楼栋D单元1',
                    key: '楼栋D单元1',
                },
                {
                    label: '楼栋D单元2',
                    key: '楼栋D单元2',
                },
                {
                    label: '楼栋D单元3',
                    key: '楼栋D单元3',
                }
            ],
            transferDialog: false,
            transferValue: ['东大门'],
            page: 0,
            pages: 0,
            //接口返回的所有数据
            allPermissions: [],
            filterPermissions: [],
            tableData: []
        }
    },
    methods: {
        //点击查询按钮
        query() {
            this.page=0
            this.pages=0
        
            const serach = {}
            if (this.$refs.ownerName.input) {
                serach.ownerName = this.$refs.ownerName.input
            }
            if (this.$refs.phone.input) {
                serach.phone = this.$refs.phone.input
            }
            if (this.$refs.ICNum.input) {
                serach.ICNum = this.$refs.ICNum.input
            }
            this.filterPermissions = this.allPermissions.filter(item => {
                if (serach.ownerName && !item.Owner.includes(serach.ownerName)) {
                    return false; // 如果不匹配，则排除该房间
                }
                if (serach.phone && !item.Phone.includes(serach.phone)) {
                    return false; // 如果不匹配，则排除该房间
                }
                if (serach.ICNum && !item.ICNum.includes(serach.ICNum)) {
                    return false; // 如果不匹配，则排除该房间
                }
                return true
            })
        },
        //点击查看图片
        lookImg(row) {

            this.visitorIMg = row.Negative
            this.dialogImg = true
        },
        //更新数据
        updatePermissions() {
            this.$axios.post('http://127.0.0.1/access/updatePermissions',
                {
                    id: this.filterPermissions[this.permissionsIndex].ID,
                    permissions: this.filterPermissions[this.permissionsIndex].Permissions
                },
                {
                    headers: {
                        'Authorization': `Bearer ${localStorage.getItem('token')}`,
                        'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                    },
                }).then(res => {
                    this.transferDialog = false
                    this.$message({
                        message: '修改权限成功',
                        type: 'success'
                    });
                }).catch(err => {
                    console.log(err);
                })
        },
        //对数组进行比较
        // compareArrays(arr1, arr2) {
        //     return arr1.length == arr2.length &&
        //         arr1.every(item => arr2.includes(item));
        // },
        //点击穿梭框的确定按钮
        editTransfer() {
            const newValue = this.transferValue.join('、')
            const lastValue = this.filterPermissions[this.permissionsIndex].Permissions
            if (newValue == lastValue) {
                //两个值相等
                this.transferDialog = false
            } else {
                //两个值不相等 修改数据 调用接口
                this.filterPermissions[this.permissionsIndex].Permissions = newValue
                this.updatePermissions()
            }



        },
        //点击配置权限
        setPermissions(row, index) {
            this.permissionsIndex = index + this.pages
            this.transferDialog = true
            this.transferValue = row.Permissions.split('、')
        },
        transferClose() {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.transferDialog = false
                })
                .catch(_ => { });
        },
        filterMethod(query, item) {
            return item.label.indexOf(query) > -1;
        },
        //get 当前页
        getPage(page) {
            this.pages = 10 * (page - 1)
        },
    },
    mounted() {
        this.$axios.get('http://127.0.0.1/access/permissions', {
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('token')}`,
                'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
            }
        }).then(res => {
            this.allPermissions = res.data
            this.filterPermissions = res.data
        }).catch(err => {
            console.log(err);
        })
    }

}
</script>

<style scoped>
.dialogImg {
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
}

.dialogImg img {
    width: 360px;
    height: 380px;
    object-fit: contain;
}

.el-transfer {
    display: flex;
    align-items: center;
    justify-content: center;
}

.table>>>.el-table {
    min-height: 580px;
}

.table>>>p {
    color: #3399ff;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.page {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: 20px;
}

.page>>>button {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    background: #fff !important;
}

.page>>>.active {
    border-color: rgba(26, 135, 254, 1) !important;
    background-color: rgba(26, 135, 254, 1) !important;
    color: #fff !important;
}

.page>>>.el-pager li {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    font-size: 12px;
    color: #999;
    font-weight: normal !important;
    background: #fff;
}

.total-page span {
    color: #FF3C2C;
}

.total-page {
    font-size: 12px;
    color: #666;
}

.top li {
    margin-bottom: 20px;
}
</style>